<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 100px;
            background-color: red;
            margin-top: 10px;
            border: 4px solid black;
            /*opacity: 0.3;*/
            /*filter: alpha(opacity:30);*/
        }
    </style>
</head>
<body>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>

<script>
    var box = document.getElementsByClassName('box');
    var time = null, speed = 0;
    for (let i = 0; i < box.length; i++) {

        box[0].onmousemove = function (e) {
            // this.style.width = "400px";
            widthAnimtion(box[0], 30, 'opacity',function () {
                widthAnimtion(box[0], 400, 'width');
            })
        }
        box[0].onmouseout = function (e) {
            // this.style.width = "400px";
            widthAnimtion(box[0], 100, 'opacity',function () {
                widthAnimtion(box[0], 200, 'width');
            })
        }
        box[i].onmouseout = function (e) {
            widthAnimtion(this, 100, 'opacity'),function () {
                widthAnimtion(box[i], 200, 'width');
            }
        }
    }

    function widthAnimtion(obj, end, attr,fn) {
        // 删除定时器
        clearInterval(obj.time);
        obj.time = setInterval(function () {
            //获取样式
            var w = 0;
            if (attr === 'opacity') {
                w = Math.round(parseFloat(getstyle(obj, attr)) * 100);
            } else {
                w = parseInt(getstyle(obj, attr));
            }
            //求速度
            speed = (end - w) / 20;
            speed = end > w ? Math.ceil(speed) : Math.floor(speed);
            //边界值处理
            if (w == end) {
                clearInterval(obj.time);
                if (fn){
                    fn();
                }
                return;
            }
            //运动起来
            if (attr === 'opacity') {
                obj.style.opacity = (w + speed) / 100;
                obj.style.opacity = "alpha(opacity:" + w + speed + ")";

            } else {
                obj.style[attr] = w + speed + "px";
            }
        }, 30);
    }

    function getstyle(obj, attr) {
        if (obj.currentStyle) {
            //针对IE
            return obj.currentStyle[attr];
        } else {
            //针对火狐
            return getComputedStyle(obj, null)[attr];
        }
    }


    // var time = null, alpha = 30, speed = 0;
    // document.getElementById('box').onmousemove = function () {
    //     opacityanimation(this, 100);
    // }
    // document.getElementById('box').onmouseout = function () {
    //     opacityanimation(this, 30);
    // }
    //
    //
    // function opacityanimation(obj, end) {
    //     clearInterval(time);
    //     time = setInterval(function () {
    //         //求透明度变化的速度
    //         speed = end > alpha ? 10 : -10;
    //
    //         //边界的处理
    //         if(alpha===end){
    //             clearInterval(time);
    //             return;
    //         }
    //
    //         //改变当前的alph的值
    //         alpha += speed;
    //         //修改值
    //         obj.style.opacity = alpha / 100;
    //         obj.style.filter = "alpha(opacity:" + alpha + ")";
    //     }, 30)
    // }

    // var box = document.getElementById('box');
    // var show = document.getElementById('show');
    // var time = null;
    // var x = 0,end=0,end1=-200;
    //
    // box.onmousemove = function () {
    //    ttt(this,0,50)
    // }
    // box.onmouseout = function () {
    //     tim(box,-200);
    // }
    //
    // function ttt(obj,end,s) {
    //     clearInterval(time);
    //     time=setInterval(function () {
    //         x=(end-box.offsetLeft)/s;
    //         x=x>0?Math.ceil(x):Math.floor(x);
    //         if(box.offsetLeft==end){
    //             clearInterval(time)
    //             return;
    //         }
    //         box.style.left=box.offsetLeft+x+"px";
    //     },30)
    // }
    //
    // // 无动画效果
    // function tim(obj,lx) {
    //     clearInterval(time)
    //     x = lx > obj.offsetLeft ? 5 : -5;
    //     time = setInterval(function () {
    //         if (box.offsetLeft === lx) {
    //             clearInterval(time);
    //             return;
    //         }
    //         // if (lx < 0) {
    //         //     x = -x;
    //         //     console.log("onmouseout");
    //         // }
    //         console.log(x);
    //         box.style.left = (box.offsetLeft + x) + "px";
    //
    //     }, 30)
    // }
</script>
</body>
</html>